<template>
  <div class="w-1440 border border-solid border-red-1">
    <a-button @click="resetPageForm">查询</a-button>
    <GTable
      :columns="columns"
      :data="dataList"
      :page-form="pageForm"
      :loading="loading"
      :action-option="actionOption"
      @getDataList="getDataList"
      @rowClick="rowClick"
    >
      <template #xxxxxx="{ record }"> 插槽 + {{ record.username }}</template>
    </GTable>
  </div>
</template>

<script lang="ts" setup>
  import useList from '@/hooks/use-list'
  import { logApi } from '@/services/api'

  const columns = [
    {
      title: '用户名称',
      dataIndex: 'username',
      slot: 'xxxxxx',
      width: 168
    },
    {
      title: 'IP',
      dataIndex: 'ip',
      width: 168
    },
    {
      title: 'IP归属地',
      dataIndex: 'ipHome',
      width: 168
    },
    {
      title: '操作系统',
      dataIndex: 'os',
      width: 168
    },
    {
      title: '浏览器',
      dataIndex: 'browser',
      width: 168
    },
    {
      title: '时间',
      dataIndex: 'operationTime',
      isSort: true,
      width: 168
    },
    {
      title: '操作记录',
      dataIndex: 'operation',
      minWidth: 440
    }
  ]

  const actionOption = {
    list: [
      {
        text: '编辑',
        disabled: (r: any) => {
          return r.username === '校长'
        },
        onClick: (r: any) => {
          alert(r.id)
        }
      }
    ],
    more: [
      {
        text: '查看',
        onClick: (r: any) => {
          alert('查看' + r.id)
        }
      },
      {
        text: '删除',
        hide: (r: any) => {
          return r.username === 'sd'
        },
        onClick: (r: any) => {
          alert('删除' + r.id)
        }
      }
    ]
  }

  const { pageForm, loading, dataList, getDataList, resetPageForm } = useList<any, any>(logApi.handleLog, {
    columns: '',
    limit: 10,
    name: '',
    offset: 1,
    order: ''
  })

  const rowClick = (record: any) => {
    console.log(record.id)
  }

  getDataList()
</script>

<style lang="less" scoped></style>
